<template>
  <div class="uc-main">
    <div v-if="activeTab === 'profile'" class="info-section">
      <h2>个人资料</h2>
      <el-row :gutter="20" class="info-row">
        <el-col :span="12" v-for="(info, index) in userFields" :key="info.key">
          <el-form-item :label="info.label" class="form-item">
            <el-input 
              v-if="info.editable" 
              v-model="sanitizedUserInfo[info.key]" 
              :placeholder="info.placeholder" 
              size="small" 
            />
            <el-input 
              v-else 
              v-model="sanitizedUserInfo[info.key]" 
              :placeholder="info.placeholder" 
              size="small" 
              disabled 
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" @click="updateUserInfo" style="margin-top: 20px;">提交修改</el-button>
    </div>

    <div v-if="activeTab === 'password'" class="info-section">
      <h2>密码安全</h2>
      <el-form-item label="原始密码" class="form-item">
        <el-input type="password" v-model="passwords.oldPassword" size="small" />
      </el-form-item>
      <el-form-item label="新密码" class="form-item">
        <el-input type="password" v-model="passwords.newPassword" size="small" />
      </el-form-item>
      <el-form-item label="确认密码" class="form-item">
        <el-input type="password" v-model="passwords.confirmPassword" size="small" />
      </el-form-item>
      <el-button type="primary" @click="updatePassword" style="margin-top: 20px;">确认修改</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';

const props = defineProps({
  userInfo: {
    type: Object,
    required: true,
  },
  passwords: {
    type: Object,
    required: false,
  },
});

// 使用默认值防止null
const sanitizedUserInfo = props.userInfo || {};

// 表单字段
const userFields = [
  { label: '昵称', key: 'nickname', editable: true, placeholder: '请输入昵称' },
  { label: '性别', key: 'sex', editable: true, placeholder: '请输入性别' },
  { label: '身份证号', key: 'idCard', editable: true, placeholder: '请输入身份证号' },
  { label: '用户名', key: 'username', editable: false, placeholder: '不可编辑' },
  { label: '角色', key: 'role', editable: false, placeholder: '不可编辑' },
  { label: '地址', key: 'useraddress', editable: true, placeholder: '请输入地址' },
  { label: '手机号码', key: 'userphone', editable: true, placeholder: '请输入手机号码' },
  { label: '用户照片', key: 'userphoto', editable: true, placeholder: '请输入用户照片链接' },
};

// 当前活动的标签
const activeTab = ref('profile');

// 更新用户信息函数
const updateUserInfo = () => {
  console.log('提交的用户信息:', sanitizedUserInfo);
};

// 更新密码函数
const updatePassword = () => {
  if (props.passwords.newPassword !== props.passwords.confirmPassword) {
    alert("新密码和确认密码不匹配！");
    return;
  }
  console.log('提交的密码信息:', props.passwords);
};
</script>

<style scoped>
.uc-main {
  padding: 20px; /* 设置主内容的内边距 */
}

.info-section {
  margin-bottom: 20px; /* 每个信息部分底部间距 */
}

.info-row {
  margin: 0; /* 消除行间距 */
}

.form-item {
  margin-bottom: 10px; /* 每个表单项的底部间距 */
}

.el-input {
  width: 100%; /* 确保输入框宽度100%以便对齐 */
}
</style>
